<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%"
              :default-sort = "{prop: 'remark2', order: 'descending'}">

      <el-table-column align="center" width="50px"  label="序号" type="index" >
        <template slot-scope="scope">
          <span>{{(listQuery.page - 1) * listQuery.limit + scope.$index + 1}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="120"  prop="groupId" label="群组ID" sortable>
      </el-table-column>

      <el-table-column align="center" width="120px" prop="groupName" label="群组名">
      </el-table-column>

      <el-table-column align="center" width="120px" prop="remark1" label="创建者ID">
      </el-table-column>

      <el-table-column align="center"  width="180px" label="创建时间"  >
        <template slot-scope="scope">
          <span>{{ scope.row.remark3 | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" align="center" width="110" prop="remark2" label="Status"  sortable>
        <template slot-scope="{row}">
          <el-tag :type="row.remark2 | statusStyleFilter">
            {{ row.remark2 | statusTextFilter}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col"  align="center" label="群描述" >
        <template slot-scope="{row}">
        </template>
      </el-table-column>


      <el-table-column align="center"  width="120px"  fixed="right" label="操 作">
        <template slot-scope="scope">
          <router-link :to="'/group/groupEdit/'+scope.row.groupId">
            <el-button type="primary" size="small" icon="el-icon-edit">
              详 情
            </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <!--分页选择-->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>

<script>
  import { fetchGroupDetail,fetchAllGroup } from '@/api/group'
  import Pagination from '@/components/Pagination'

  export default {
    name: 'GroupList',
    components: { fetchAllGroup, Pagination },
    filters: {
      statusStyleFilter(status) {
        const statusMap = {
          1: 'success',
          0: 'danger'
        }
        return statusMap[status]
      },
      statusTextFilter(status) {
        const statusMap = {
          1: '正 常',
          0: '封 禁'
        }
        return statusMap[status]
      },
    },

    data() {
      return {
        data1: null,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10
        }
      }
    },
    created() {
      this.getList()　
    },
    methods: {
      getList() {
        this.listLoading = true
        fetchAllGroup(this.listQuery).then(response => {
          this.list = response.data.list
          this.total = response.data.total
          this.listLoading = false
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .edit-input {
    padding-right: 100px;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
